<script lang="ts" setup>
import { ref, computed } from 'vue'

const dialogState = ref(false)
const targetElectronSymbolVersion = ref('')
const allElectronSymbolVersions = ref([])
const destDir = ref('')
const isDownloading = ref(false)
const electronVersionButtonHint = computed(() =>
  allElectronSymbolVersions.value.length ? '选择一个版本' : '获取 Electron 所有版本'
)
const downloadSymbol = async () => {
  isDownloading.value = true
  await window.electron.ipcRenderer.invoke(
    'downloadSymbol',
    targetElectronSymbolVersion.value,
    destDir.value
  )
  isDownloading.value = false
}
const selectFolder = async () => {
  const dir = await window.electron.ipcRenderer.invoke('selectFolder')
  destDir.value = dir
}
const onElectronVesion = async () => {
  dialogState.value = true
  if (!allElectronSymbolVersions.value.length) {
    const versions = await window.electron.ipcRenderer.invoke('allElectronVersions')
    console.debug('onElectronVersion', versions)
    allElectronSymbolVersions.value = versions
  }
}
</script>
<template lang="pug">
v-sheet
  v-card
    v-card-title
      h1.headline4 Electron 版本
    v-card-text
      v-row
        v-col(cols="2").text-center
          h4.headline5 下载位置
        v-col(cols="8")
          v-text-field(
              v-model="destDir"
              @change="selectFolder"
            )
        v-col(cols="2")
          v-tooltip(text="选择下载位置")
            template(#activator="{ props }")
              v-btn.flex-1.ml-5(icon="mdi-folder" v-bind="props" @click="selectFolder") 
      // --- symbol
      v-row
        v-col(cols="2").text-center
          h4.headline5 Electron 符号表版本
        v-col(cols="8")
          v-text-field(
              v-model="targetElectronSymbolVersion"
              readonly
            )
        v-col(cols="2")
          v-tooltip(:text="electronVersionButtonHint")
            template(#activator="{ props }")
              v-btn.flex-1.ml-5(:icon="allElectronSymbolVersions.length ? 'mdi-select' : 'mdi-refresh'" v-bind="props" @click="onElectronVesion") 
    v-card-actions
      v-progress-circular(v-if="isDownloading" color="primary" indeterminate="disable-shrink" size="16" width="2")
      v-spacer
      v-btn(
        :disabled="!destDir"
        color="primary"
        text
        prepend-icon="mdi-export-variant"
        @click="downloadSymbol"
      ) 下载符号表
// --- electron version dialog
div.pa-4.text-center
  v-dialog(v-model="dialogState" width="50%" persistent scrollable )
    template(#default="{ isActive }")
      div(v-if="!allElectronSymbolVersions.length")
        v-list.py-2(color="primary" elevation="12" rounded="lg")
          v-list-item(prepend-icon="$vuetify-outline" title="getting electron version...")
            template(#prepend)
              div.pe-4
                v-icon(color="primary" size="x-large")
            template(#append)
              v-progress-circular(color="primary" indeterminate="disable-shrink" size="16" width="2")
      div(v-else) 
        v-card(prepend-icon="mdi-earth" title="Electron Version")
          v-divider.mt-3
          v-card-text.px-4
            v-row
              v-col(cols="12")
                v-autocomplete(v-model="targetElectronSymbolVersion" :items="allElectronSymbolVersions" density="comfortable" label="Electron Version")
          v-divider 
          v-card-actions
            v-btn(text="Close" @click="isActive.value = false")
            v-spacer
            v-btn(text="Save" color="surface-variant" variant="flat" @click="isActive.value = false")
</template>
